<template>
  <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="true"
      @close="closeDialog"
      @opened="openedDialog"
      width="70%"
  >
    <div style="height: 700px">
      <div class="dialog-search-div">
        <el-button type="primary" @click="addDetailDictFn">新增</el-button>
        <el-popconfirm title="是否删除?" @confirm="delDetailDictFn">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </div>
      <div class="dialog-table-div">
        <common-page-table
            :data="tableData"
            :columns="columns"
            :pagination="pagination"
            :show-border="true"
            :need-one-select="true"
            :show-no="true"
            :loading="tableLoading"
            :show-action="true"
            :action-config="actionConfig"
            @sizeChange="sizeChange"
            @currentChange="currentChange"
            @handle-current-change="handleTableCurrentChange"
        >
          <template #action="{row}">
            <el-button type="text" @click="editDetail(row)">编辑</el-button>
          </template>
        </common-page-table>
      </div>
    </div>
  </el-dialog>
  <dict-detail-content-dialog
      :show-dialog="detailContentItem.showDialog"
      :title="detailContentItem.title"
      :dialog-type="detailContentItem.dialogType"
      :dialog-param="detailContentItem.dialogParam"
      @close-dialog="handleContentClose($event)"
      @opened-dialog="handleContentOpened"
      @closed-dialog="handleContentClosed($event)"
      @open-dialog="handleContentOpen"
  ></dict-detail-content-dialog>
</template>

<script setup lang="ts">
import CommonPageTable from "@/components/common/CommonPageTable.vue";
import {reactive, ref, watch} from "vue";
import {delDetailDictReq, getDetailDictReq} from "@/api/admin/dict.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import DictDetailContentDialog from "@/components/manager/dict/DictDetailContentDialog.vue";
import {DIALOG_ADD, DIALOG_EDIT} from "@/constants/common-constant.ts";
import {checkIsNull} from "@/utils/check-utils.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";

interface DetailContentItem {
  showDialog: boolean;
  title: string;
  dialogType: string;
  dialogParam: any;
}

const detailContentItem = reactive<DetailContentItem>({
  showDialog: false,
  title: '',
  dialogType: '',
  dialogParam: {}
})

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  dialogTitle: {
    type: String,
    default: ''
  },
  dialogParam: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['closeDialog'])
const showDialog = ref(props.showDialog)
watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})

const tableData = ref([])
const columns = [
  {prop: 'detailKey', label: '明细key', width: 'auto', fixed: 'left'},
  {prop: 'detailText', label: '明细文本', width: 'auto', fixed: 'left'},
  {prop: 'detailValue', label: '明细值', width: 'auto'},
  {prop: 'introduce', label: '说明', width: 'auto'},
  {prop: 'seq', label: '排序', width: 'auto'}
]
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)
const pagination = reactive({
  currentPage: currentPage.value,
  pageSize: pageSize.value,
  total: total.value
})
const tableLoading = ref<boolean>(false)
const actionConfig = {
  prop: 'action',
  label: '操作',
  width: 'auto',
}
const sizeChange = (val: number) => {
  pageSize.value = val;
  pagination.pageSize = val;

  searchList().then();
}
const currentChange = (val: number) => {
  currentPage.value = val;
  pagination.currentPage = val;

  searchList().then();
}
const currentRow = ref<any>({})
const handleTableCurrentChange = (row: any) => {
  currentRow.value = row
}

const addDetailDictFn = () => {
  detailContentItem.showDialog = true
  detailContentItem.title = '新增'
  detailContentItem.dialogType = DIALOG_ADD
  detailContentItem.dialogParam = {
    dictionaryKey: props.dialogParam['dictionaryKey']
  }
}

const delDetailDictFn = async () => {
  const selectRow = currentRow.value
  if (checkIsNull(selectRow)) {
    warningMessageTip('请选择要删除的明细')
    return
  }

  const params = {
    id: selectRow['id']
  }
  const res: any = await delDetailDictReq(params);
  elMessageTip(res.tipType, res.message)
  if (res.code === RESPONSE_CODE_SUCCESS){
    searchList().then();
  }
}

const closeDialog = () => {
  emits('closeDialog', false)
  tableData.value = []
}

const openedDialog = async () => {
  currentPage.value = 1
  pagination.currentPage = 1
  searchList().then();
}

const searchList = async () => {
  const params = {
    dictionaryKey: props.dialogParam['dictionaryKey'],
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }
  tableLoading.value = true
  const res: any = await getDetailDictReq(params);
  tableLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS){
    tableData.value = res.data.rows;
    pagination.total = res.data.total;
  }
}

const editDetail = (row: any) => {
  detailContentItem.showDialog = true
  detailContentItem.title = '编辑'
  detailContentItem.dialogType = DIALOG_EDIT
  detailContentItem.dialogParam = row
}

const handleContentClose = (val: boolean) => {
  detailContentItem.showDialog = val
}

const handleContentClosed = async (val: boolean) => {
  detailContentItem.showDialog = val
  searchList().then();
}

const handleContentOpened = () => {

}

const handleContentOpen = () => {

}
</script>

<style scoped>
.dialog-search-div {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dialog-table-div {
  height: calc(100% - 50px);
  width: 100%;
}

</style>